<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{ 
        }
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div style=" display: flex;">
        <div> 
            <div>lesson1入门</div>
            <canvas id="lesson1" width="600" height="100">当前浏览器不支持canvas</canvas>
            <button id="lesson1btn">清除</button>
    
            <div>lesson2 Path2D 贝塞尔曲线 阴影</div>
            <canvas id="lesson2" width="600" height="110">当前浏览器不支持canvas</canvas>
     
            <div>lesson3 线性渐变 镜像渐变 圆锥渐变</div>
            <canvas id="lesson3" width="600" height="210">当前浏览器不支持canvas</canvas> 
        </div>
        <div>
            <div style="display: flex;"> 
                <div>
                    <div>lesson5 虚线,折线</div>
                    <canvas id="lesson5" width="400" height="100">当前浏览器不支持canvas</canvas> 
                </div>
                <div>
                    <div>lesson7 文字</div>
                    <canvas id="lesson7" width="400" height="100">当前浏览器不支持canvas</canvas> 

                </div>
            </div>
            
            <div>lesson6 水印</div>
            <canvas id="lesson6" width="400" height="220">当前浏览器不支持canvas</canvas> 
            <video id="video-ls6" src="./imgs/video.mp4" controls></video>
            <button id="btn-ls6">播放</button>
        </div>
    </div>

    <div>lesson4 图章, 图片, 缩放,截取</div>
    <canvas id="lesson4" width="2080" height="2350">当前浏览器不支持canvas</canvas>
    <script src="./lesson1.js"></script>
    <script src="./lesson2.js"></script>
    <script src="./lesson3.js"></script>
    <script src="./lesson4.js"></script>
    <script src="./lesson5.js"></script>
    <script src="./lesson6.js"></script>
    <script>
        window.onload = function(){
            for(let i=1;i<7;i++){
                window['go'+i]()
            }
        }
    </script>
</body>
</html>